<style include="cr-shared-style settings-shared iron-flex">
  .container {
    display: flex;
    flex-direction: column;
    min-height: 10px;
    overflow-y: auto;
  }

  paper-spinner-lite {
    height: var(--cr-icon-size);
    margin-block-start: 18px; /* Align with h2. */
    width: var(--cr-icon-size);
  }

  #onOff {
    font-weight: 500;
  }

  #onOff[on] {
    color: var(--cros-text-color-prominent);
  }
  /* Disables click events on #enableBluetooth during a state change.
   * This is added in lieu of disabling #enableToggle to prevent
   * transient disables from state changes to be varbalized by ChromeVox
   * (see http://crbug/1007378 for more details). */
  :host([state-change-in-progress]) #enableBluetooth {
    cursor: initial;
    opacity: var(--cr-disabled-opacity);
    pointer-events: none;
  }
</style>
<div id="enableBluetooth" class="cr-row first" on-click="onEnableTap_"
    actionable>
  <div id="onOff" class="flex cr-padded-text"
      on$="[[bluetoothToggleState]]" aria-hidden="true">
    [[getOnOffString_(bluetoothToggleState,
      '$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]
  </div>
  <cr-toggle id="enableToggle"
      checked="{{bluetoothToggleState}}"
      disabled$="[[!isAdapterAvailable_(adapterState)]]"
      aria-label="$i18n{bluetoothToggleA11yLabel}"
      deep-link-focus-id$="[[Setting.kBluetoothOnOff]]">
  </cr-toggle>
</div>
<!-- Paired device list -->
<div class="cr-row first" hidden="[[!bluetoothToggleState]]">
  <h2 class="flex">$i18n{bluetoothDeviceListPaired}</h2>
</div>
<div id="noPairedDevices" class="list-frame cr-padded-text"
    hidden="[[!showNoDevices_(bluetoothToggleState, pairedDeviceList_,
        pairedDeviceList_.splices)]]">
  $i18n{bluetoothNoDevices}
</div>
<div id="pairedContainer" class="container list-frame"
    scrollable on-device-event="onDeviceEvent_"
    hidden="[[!showDevices_(bluetoothToggleState, pairedDeviceList_,
        pairedDeviceList_.splices)]]">
  <iron-list id="pairedDevices" items="[[pairedDeviceList_]]"
      scroll-target="pairedContainer" class="cr-separators" preserve-focus>
    <template>
      <bluetooth-device-list-item actionable device="[[item]]"
          first$="[[!index]]" tabindex$="[[tabIndex]]"
          focus-row-index="[[index]]" iron-list-tab-index="[[tabIndex]]"
          last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}"
          deep-link-focus-id$="[[Setting.kBluetoothConnectToDevice]]
              [[Setting.kBluetoothDisconnectFromDevice]]
              [[Setting.kBluetoothUnpairDevice]]"
          on-blocked-tooltip-state-change="onBlockedTooltipStateChange_">
      </bluetooth-device-list-item>
    </template>
  </iron-list>
</div>
<!-- Unpaired device list -->
<div class="cr-row first" hidden="[[!bluetoothToggleState]]">
  <h2 class="flex">$i18n{bluetoothDeviceListUnpaired}</h2>
  <paper-spinner-lite active="[[showSpinner_]]">
  </paper-spinner-lite>
</div>
<div id="noUnpairedDevices" class="list-frame cr-padded-text"
    hidden="[[!showNoDevices_(bluetoothToggleState, unpairedDeviceList_,
        unpairedDeviceList_.splices)]]">
  $i18n{bluetoothNoDevicesFound}
</div>
<div id="unpairedContainer" class="container list-frame"
    scrollable on-device-event="onDeviceEvent_"
    hidden="[[!showDevices_(bluetoothToggleState, unpairedDeviceList_,
        unpairedDeviceList_.splices)]]">
  <iron-list id="unpairedDevices" class="cr-separators"
      preserve-focus items="[[unpairedDeviceList_]]"
      scroll-target="unpairedContainer">
    <template>
      <bluetooth-device-list-item actionable device="[[item]]"
          first$="[[!index]]" tabindex$="[[tabIndex]]"
          deep-link-focus-id$="[[Setting.kBluetoothPairDevice]]"
          on-blocked-tooltip-state-change="onBlockedTooltipStateChange_">
      </bluetooth-device-list-item>
    </template>
  </iron-list>
</div>
<paper-tooltip id="tooltip"
    manual-mode
    position="top"
    aria-hidden="true">
  $i18n{bluetoothManaged}
</paper-tooltip>
<bluetooth-dialog id="deviceDialog"
    bluetooth="[[bluetooth]]"
    bluetooth-private="[[bluetoothPrivate]]"
    dialog-title="$i18n{bluetoothPairDevicePageTitle}"
    on-close="onDialogClose_"
    pairing-device="[[pairingDevice_]]">
</bluetooth-dialog>
